<!--
 * @Author: lizilong 94648929@qq.com
 * @Date: 2024-03-06 19:50:05
 * @LastEditors: lizilong 94648929@qq.com
 * @LastEditTime: 2024-03-11 22:52:34
 * @FilePath: \sofast-video\src\views\VideoView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <nav class="border-gray-200 bg-neutral-900 px-2.5 py-2.5 shadow-sm dark:bg-slate-800 sm:px-4 block print:hidden">
    <div class="container mx-0 flex max-w-full flex-wrap items-center lg:mx-auto">
      <div class="flex items-center">
        <a href="#" class="flex items-center outline-none">
          <img src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/logo-sm.png" alt="" class="h-6">
          <img src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/logo.png" alt=""
            class="ml-2 hidden xl:block mt-1">
        </a>
      </div>
      <div class="order-2 hidden w-full items-center justify-between md:order-1 md:ml-5 md:flex md:w-auto"
        id="mobile-menu-2">
        <ul
          class="font-body mt-4 flex flex-col font-medium md:mt-0 md:flex-row md:text-sm md:font-medium space-x-0 md:space-x-4 lg:space-x-6 xl:space-x-8 navbar">

          <li class="dropdown">
            <button id="navPagesLink" data-dropdown-toggle="navPages"
              class="dropdown-toggle flex w-full items-center border-b border-gray-800 py-2 px-3 font-medium md:border-0 md:p-0 text-white">
              <i class="ti ti-file-diff mr-1 pb-1 text-lg"></i> Pages
              <i class="ti ti-chevron-down ml-auto lg:ml-1"></i>
            </button>
          </li>
        </ul>
      </div>
      <div class="order-1 ml-auto flex items-center md:order-2">
        <div class="relative mr-2 hidden lg:mr-4 lg:block">
          <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <i class="ti ti-search text-gray-400 z-10"></i>
          </div>
          <input type="text" id="email-adress-icon"
            class="block w-full rounded-lg border border-gray-700 bg-gray-900 p-2 pl-10 text-gray-300 outline-none focus:border-gray-700 focus:ring-gray-700 dark:bg-slate-800 sm:text-sm"
            placeholder="Search...">
        </div>
        <div class="mr-2 lg:mr-4">
          <button id="toggle-theme" class="flex rounded-full md:mr-0 relative">
            <i class="ti ti-sun top-icon"></i>
          </button>
        </div>
        <div class="mr-2 lg:mr-4 dropdown relative">
          <button type="button" class="dropdown-toggle flex rounded-full md:mr-0" id="Notifications"
            aria-expanded="false" data-dropdown-toggle="navNotifications">
            <i class="ti ti-bell text-2xl text-gray-400"></i>
          </button>
          <div
            class="dropdown-menu dropdown-menu-right z-50 my-1 hidden w-64 list-none divide-y h-52 divide-gray-100 rounded border-slate-700 md:border-white text-base shadow dark:divide-gray-600 bg-white dark:bg-slate-800"
            id="navNotifications" data-simplebar="init">
            <div class="simplebar-wrapper" style="margin: 0px;">
              <div class="simplebar-height-auto-observer-wrapper">
                <div class="simplebar-height-auto-observer"></div>
              </div>
              <div class="simplebar-mask">
                <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
                  <div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content"
                    style="height: auto; overflow: hidden;">
                    <div class="simplebar-content" style="padding: 0px;">
                      <ul class="py-1" aria-labelledby="navNotifications">
                        <li class="py-2 px-4">
                          <a href="javascript:void(0);" class="dropdown-item">
                            <div class="flex align-items-start">
                              <img class="object-cover rounded-full h-8 w-8 shrink-0 mr-3"
                                src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/users/avatar-2.jpg"
                                alt="logo">
                              <div class="flex-grow ml-0.5 overflow-hidden">
                                <p class="text-sm font-medium text-gray-800 truncate dark:text-gray-300">Karen Robinson
                                </p>
                                <p class="text-gray-500 mb-0 text-xs  truncate dark:text-gray-400">
                                  Hey ! i'm available here
                                </p>
                              </div>
                            </div>
                          </a>
                        </li>
                        <li class="py-2 px-4">
                          <a href="javascript:void(0);" class="dropdown-item">
                            <div class="flex align-items-start">
                              <img class="object-cover rounded-full h-8 w-8 shrink-0 mr-3"
                                src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/users/avatar-3.jpg"
                                alt="logo">
                              <div class="flex-grow ml-0.5 overflow-hidden">
                                <p class="text-sm font-medium text-gray-800 truncate dark:text-gray-300">Your order is
                                  placed</p>
                                <p class="text-gray-500 mb-0 text-xs  truncate dark:text-gray-400">
                                  Dummy text of the printing and industry.
                                </p>
                              </div>
                            </div>
                          </a>
                        </li>
                        <li class="py-2 px-4">
                          <a href="javascript:void(0);" class="dropdown-item">
                            <div class="flex align-items-start">
                              <img class="object-cover rounded-full h-8 w-8 shrink-0 mr-3"
                                src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/users/avatar-9.jpg"
                                alt="logo">
                              <div class="flex-grow ml-0.5 overflow-hidden">
                                <p class="text-sm font-medium text-gray-800 truncate dark:text-gray-300">Robert McCray
                                </p>
                                <p class="text-gray-500 mb-0 text-xs  truncate dark:text-gray-400">
                                  Good Morning!
                                </p>
                              </div>
                            </div>
                          </a>
                        </li>
                        <li class="py-2 px-4">
                          <a href="javascript:void(0);" class="dropdown-item">
                            <div class="flex align-items-start">
                              <img class="object-cover rounded-full h-8 w-8 shrink-0 mr-3"
                                src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/users/avatar-6.jpg"
                                alt="logo">
                              <div class="flex-grow ml-0.5 overflow-hidden">
                                <p class="text-sm font-medium text-gray-800 truncate dark:text-gray-300">Meeting with
                                  designers</p>
                                <p class="text-gray-500 mb-0 text-xs  truncate dark:text-gray-400">
                                  It is a long established fact that a reader.
                                </p>
                              </div>
                            </div>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="simplebar-placeholder" style="width: 0px; height: 0px;"></div>
            </div>
            <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
              <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div>
            </div>
            <div class="simplebar-track simplebar-vertical" style="visibility: hidden;">
              <div class="simplebar-scrollbar" style="height: 0px; display: none;"></div>
            </div>
          </div>
        </div>
        <div class="mr-2 lg:mr-0 dropdown relative">
          <button type="button"
            class="dropdown-toggle flex items-center rounded-full text-sm focus:bg-none focus:ring-0 dark:focus:ring-0 md:mr-0"
            id="user-profile" aria-expanded="false" data-dropdown-toggle="navUserdata">
            <img class="h-8 w-8 rounded-full"
              src="https://v.bootstrapmb.com/2023/6/0fso13868/assets/images/users/avatar-1.jpg" alt="user photo">
            <span class="ml-2 hidden text-left xl:block">
              <span class="block font-medium text-gray-400">Maria Gibson</span>
              <span class="-mt-1 block text-sm font-medium text-gray-500">Admin</span>
            </span>
          </button>
          <div
            class="dropdown-menu dropdown-menu-right z-50 my-1 hidden list-none divide-y divide-gray-100 rounded border-slate-700 md:border-white text-base shadow dark:divide-gray-600 bg-white dark:bg-slate-800"
            id="navUserdata">
            <div class="py-3 px-4">
              <span class="block text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</span>
              <span class="block truncate text-sm font-normal text-gray-500 dark:text-gray-400">name@flowbite.com</span>
            </div>
            <ul class="py-1" aria-labelledby="navUserdata">
              <li>
                <a href="#"
                  class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-900/20 dark:hover:text-white">Dashboard</a>
              </li>
              <li>
                <a href="#"
                  class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-900/20 dark:hover:text-white">Settings</a>
              </li>
              <li>
                <a href="#"
                  class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-900/20 dark:hover:text-white">Earnings</a>
              </li>
              <li>
                <a href="#"
                  class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-900/20 dark:hover:text-white">Sign
                  out</a>
              </li>
            </ul>
          </div>
        </div>
        <button data-collapse-toggle="mobile-menu-2" type="button" id="toggle-menu"
          class="ml-1 inline-flex items-center rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-0 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden"
          aria-controls="mobile-menu-2" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <i class="ti ti-menu-2 h-6 w-6 text-lg leading-6"></i>
          <i class="ti ti-X hidden h-6 w-6 text-lg leading-6"></i>
        </button>
      </div>
    </div>
  </nav>
  <div class="h-full flex flex-1 pt-8 video-details bg-neutral-900">
    <div class="play-layout flex flex-1">
      <div class="flex-1">
        <div class="video-box">
          <div class="container-player">
            <div class="video" style="width: 100%; height: 100%;">播放容器</div>
          </div>
        </div>
        <div class="flex items-center mt-8 video-intro p-4 rounded-lg">
          <div class="user-avatar flex items-center mr-4">
            <el-avatar :size="50" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
          </div>
          <div class="flex-1">
            <input type="text" class="border h-12 w-full rounded-lg p-2">
          </div>
        </div>
      </div>
      <div class="h-full w-80 ml-8">

        <div class="flex video-intro p-4 rounded-lg">
          <div class="w-20 mr-4">
            <div class="video-intro-img-box overflow-hidden rounded shadow-md">
              <div class="video-intro-img absolute-fill">
                <el-image style="width: 100%; height: 100%"
                  src="https://vpic-cover.puui.qpic.cn/o3540a0451m/o3540a0451m_1708331922_hz.jpg" fit="cover" />
              </div>
            </div>
          </div>

          <div class="flex-1 text-white">
            <h2 class="text-lg">神隐</h2>
            <div class="mt-2">
              <p class="text-sm text-gray-400">介绍</p>
            </div>
          </div>
        </div>
        <div class="mt-8 video-intro p-4 rounded-lg">
          <div>
            <div class="pb-3">
              <h3 class="text-xs text-slate-200 font-bold">片源</h3>
            </div>
            <el-row :gutter="10">
              <el-col :span="6" v-for="(s, index) in sourceList" :key="s.id" :class="{ 'mt-2.5': index >= 4 }">
                <el-tooltip class="box-item" effect="dark" :content="s.label" placement="top">
                  <div style="padding-bottom: 50%;"
                    class="playlist-item-rect relative playlist-item-rect--number playlist-item-rect--normal"
                    :class="{ 'playlist-item-rect--active': s.id === activeSource }" @click="activeSource = s.id">
                    <div class="playlist-item-rect__container absolute-fill">
                      <span class="playlist-item-rect__title">{{ s.label }}</span>
                    </div>
                  </div>
                </el-tooltip>

              </el-col>
            </el-row>
          </div>
        </div>
        <div class="mt-8 video-intro p-4 rounded-lg">
          <div>
            <div class="pb-3">
              <h3 class="text-xs text-slate-200 font-bold">选集</h3>
            </div>
            <el-row :gutter="10">
              <el-col :span="4" v-for="i in 36" :key="i" :class="{ 'mt-2.5': i > 6 }">
                <el-tooltip class="box-item" effect="dark" content="精彩剧情" placement="top">
                  <div class="playlist-item-rect relative playlist-item-rect--number playlist-item-rect--normal"
                    :class="{ 'playlist-item-rect--active': i === activeIndex }" @click="activeIndex = i">
                    <div class="playlist-item-rect__container absolute-fill">
                      <span class="playlist-item-rect__title">{{ i }}</span>
                    </div>
                  </div>
                </el-tooltip>

              </el-col>
            </el-row>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
// import Player from 'xgplayer'
// import 'xgplayer/es/index.css'
// import DPlayer from 'dplayer';
const sourceList = ref([{
  id: 1,
  label: "FF源"
}, {
  id: 2,
  label: "HD源"
}, {
  id: 3,
  label: "BF源"
}, {
  id: 4,
  label: "YK源"
}, {
  id: 5,
  label: "蓝光"
}, {
  id: 6,
  label: "KK源"
}, {
  id: 7,
  label: "LZ源"
}, {
  id: 8,
  label: "HN源"
}, {
  id: 9,
  label: "TK源"
}, {
  id: 10,
  label: "BD源"
}, {
  id: 11,
  label: "UK源"
}, {
  id: 12,
  label: "BJ源"
}])
const activeSource = ref(1)
const activeIndex = ref(32)

onMounted(() => {
  // let player = new DPlayer({
  //   id: 'mse',
  //   autoplay: false,
  //   volume: 0.3,
  //   url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
  //   poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
  //   playsinline: true,
  // });

  // const dp = new DPlayer({
  //   container: document.getElementById('mse'),
  //   video: {
  //     url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
  //   },
  // });

  //调用开始
  var videoObject = {
    container: '.video', //视频容器
    plug: 'hls.js',//设置使用hls插件
    poster: 'https://vpic-cover.puui.qpic.cn/o3540a0451m/o3540a0451m_1708331922_hz.jpg',//封面图片
    video: 'https://vip.ffzy-online6.com/20240306/27199_cea9e4ce/index.m3u8'//视频地址
    // video: 'https://yzzy1.play-cdn1.com/20240305/18885_731402bf/index.m3u8'//视频地址
  };
  var player = new (window as any).ckplayer(videoObject)//调用播放器并赋值给变量player

})
</script>

<style lang="less">
.play-layout {
  display: flex;
  max-width: 1600px;
  padding: 0 60px;
  margin: 0 auto;
}

.video-box {
  width: 100%;
  padding-bottom: 56.25%;
  position: relative;

  .container-player {
    width: 100%;
    height: 100%;
    position: absolute;

    .video {
      background-color: rgba(255, 255, 255, .05);
    }
  }
}

.video-intro {
  background: rgba(255, 255, 255, 0.05);

}

.playlist-item-rect {
  padding-bottom: 100%;
}

.playlist-item-rect__container {
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
  font-size: 16px;
}

.playlist-item-rect--active {
  position: relative;

  &::before {
    position: absolute;
    right: 4px;
    top: 4px;
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background-color: rgb(8, 180, 180);
  }

  .playlist-item-rect__container {
    background-color: rgba(0, 209, 209, 0.1);
    color: rgb(8, 180, 180);
  }
}

.absolute-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video-intro-img-box {
  position: relative;
  padding-bottom: 140%;
}
</style>